import express from "express";
import { renderToString } from "vue/server-renderer";
import { createApp } from "./vueApp.js";

const server = express();
server.use(express.static("."));

server.get("/vue", (req, res) => {
  const app = createApp();

  renderToString(app).then((html) => {
    res.send(`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <div id="app">${html}</div>
   <script type="importmap">
          {
            "imports": {
              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
          }
        </script>
   <script type="module" src="./client.js"></script>
  </body>
</html>`);
  });
});

server.listen(3000, () => {
  console.log("ready");
});
